<template>
  <div id="echartsGdywblqk"></div>
</template>

<script>
import Sever from '@/api/selfApi'
export default {
  props: {
    depCode: {
      type: String
    }
  },
  data() {
    return {}
  },
  watch: {
    depCode(newValue, oldValue) {
      this.initData()
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    async initData() {
      //请求后台返回数据
      try {
        //请求后台接口
        const res = await Sever.ywfx.getDshSumByDep({
          dep_code: this.depCode
        })
        console.log(res)
        var deps = []
        var dshs = []
        res.forEach((element) => {
          deps.push(element.DEP_NAME)
          dshs.push(element.DSH_SUM)
        })
        console.log(deps)

        var option = {
          grid: {
            top: '40',
            left: '25',
            right: '10',
            bottom: '0',
            containLabel: true
          },
          title: {
            text: '各地业务办理情况',
            left: 'center',
            textStyle: {
              color: '#fff'
            }
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: [
            {
              type: 'category',
              axisPointer: {
                type: 'shadow'
              },
              axisTick: { show: false },
              axisLabel: {
                show: true,
                rotate: 30,
                textStyle: {
                  fontSize: 13, // 字体大小
                  color: '#f0f0f0'
                }
              },
              data: deps
            }
          ],
          yAxis: [
            {
              type: 'value',
              show: false,
              name: '编制数',
              nameTextStyle: {
                fontSize: 14, // 字体大小
                color: '#ffffff'
              },
              splitLine: { show: false },
              axisLabel: { show: false }
            }
          ],
          series: [
            {
              name: '党政群行政编制',
              type: 'bar',
              barWidth: '60%',
              yAxisIndex: 0,
              itemStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: '#FA8231' // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: '#F7B731' // 100% 处的颜色
                      }
                    ],
                    false
                  ),
                  label: {
                    show: true, //开启显示
                    position: 'top', //在上方显示
                    textStyle: {
                      //数值样式
                      color: '#ffffff',
                      fontSize: 13
                    }
                  }
                }
              },
              data: dshs
            }
          ]
        }

        this.echartsGdywblqk = this.$echarts.init(
          document.getElementById('echartsGdywblqk')
        )
        this.echartsGdywblqk.setOption(option)
        window.addEventListener(
          'resize',
          () => this.echartsGdywblqk.resize(),
          false
        )
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang='scss'>
#echartsGdywblqk {
  width: 100%;
  height: 100%;
}
</style>
